<template>
  <div class='top-bar-item'>
    <div>
        <slot name='item-pic'></slot>
    </div>
    <div v-if='active'>
        <slot name='item-text1'></slot>
    </div>
    <div v-else>
        <slot name='item-text2'></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopBarItem',
  data () {
    return {
      active: true
    }
  }
}
</script>

<style scoped>
  .top-bar-item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
</style>
